<template>
  <a-modal
    :visible="visible"
    :afterClose="hanldeAfterClose"
    @cancel="handleCancel"
    @ok="handleOk"
    :confirmLoading="isSubmiting"
    :title="`${$isEmpty(houseID) ? '添加' : '修改'}房屋信息`"
  >
    <a-spin :spinning="spinning">
      <a-form :form="form" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
        <a-form-item label="房屋状态">
          <a-select
            v-decorator="['Mode', { rules: [{ required: true, message: '请选择房屋状态' }] }]"
            placeholder="请选择房屋状态"
            :options="houseTypeOptions"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="房屋结构">
          <a-select
            v-decorator="['Structure', { rules: [{ required: true, message: '请选择房屋结构' }] }]"
            placeholder="请选择房屋结构"
            :options="structureOptions"
          >
          </a-select>
        </a-form-item>
        <a-form-item label="楼层">
          <a-input-number
            :disabled="!$isEmpty(houseID)"
            v-decorator="['Floor', { rules: [{ required: true, message: '请输入楼层号' }] }]"
            placeholder="请输入楼层号"
          ></a-input-number>
        </a-form-item>
        <a-form-item label="附号">
          <a-input
            :disabled="!$isEmpty(houseID)"
            v-decorator="['Number', { rules: [{ required: true, message: '请输入附号' }] }]"
            placeholder="请输入附号"
          ></a-input>
        </a-form-item>
        <a-form-item label="房屋面积（㎡）">
          <a-input-number
            v-decorator="['Area', { rules: [{ required: true, message: '请输入房屋面积' }] }]"
            placeholder="请输入房屋面积"
            :formatter="(value) => (value ? `${value}㎡` : '')"
          ></a-input-number>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { getHouseDetail, postHouseElement } from '@/api/followUpManagement'
import { getDropdownList, getHouseTypeColor } from '@/api/common'
import pick from 'lodash.pick'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    houseID: {
      type: [String, Number],
      default: ''
    },
    building: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'houseItem' }),
      isSubmiting: false,
      spinning: false,
      houseElement: {},
      houseTypeOptions: [],
      structureOptions: []
    }
  },
  watch: {
    visible (n) {
      if (n) {
        this.fetchData()
      }
    }
  },
  methods: {
    fetchData () {
      this.spinning = true
      const getHouseType = getHouseTypeColor({ PmKey: 'HoueTypeColor' })
      const getStructure = getDropdownList({ PmKey: 'Structure' })
      const requestArr = [getHouseType, getStructure]
      if (!this.$isEmpty(this.houseID)) {
        const $getHouseDetail = getHouseDetail({ id: this.houseID })
        requestArr.push($getHouseDetail)
      }
      Promise.all(requestArr)
        .then((res) => {
          this.houseTypeOptions = res[0].map((e) => {
            return {
              value: e.PMNAME,
              label: e.PMNAME
            }
          })
          this.structureOptions = res[1].map((e) => {
            return {
              value: e.DROPKEY,
              label: e.DROPVALUE
            }
          })
          if (!this.$isEmpty(this.houseID)) {
            res[2].Structure = Number(res[2].Structure)
            this.houseElement = res[2]
            this.form.setFieldsValue(pick(res[2], ['Mode', 'Structure', 'Floor', 'Number', 'Area']))
          }
        })
        .finally(() => {
          this.spinning = false
        })
    },
    close () {
      this.form.resetFields()
      this.houseElement = {}
      this.$emit('update:visible', false)
      this.$emit('update:houseID', '')
    },
    handleCancel () {
      this.close()
      this.hanldeAfterClose()
    },
    handleOk () {
      this.form.validateFields((err, values) => {
        if (!err) {
          const isAdd = this.$isEmpty(this.houseID)
          const houseresources = Object.assign(values, {
            ID: this.houseID || 0,
            LID: this.building.ID
          })
          this.isSubmiting = true
          postHouseElement({
            State: isAdd ? 'add' : 'update',
            houseresources
          })
            .then((res) => {
              this.$message.success(`房源${isAdd ? '添加' : '修改'}成功！`)
              this.$emit('success', isAdd)
              this.close()
            })
            .finally(() => {
              this.isSubmiting = false
            })
        }
      })
    },
    hanldeAfterClose () {}
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker,
.ant-input-number {
  width: 100%;
}
</style>
